<!--
 * @Description: roductLIST
 * @Date: 2024-02-27 21:54:41
 * @LastEditTime: 2024-02-27 21:54:50
 * @FilePath: /pure-admin-thin/src/views/product/list.vue
-->

<script setup lang="ts">
import { useCategoryStoreHook } from "@/store/modules/category";
import { buildTree } from "@/utils/tree";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type Node from "element-plus/es/components/tree/src/model/node";

interface Tree {
  id: string;
  pid: string;
  name: string;
  children?: Tree[];
}

const router = useRouter();

const treeData = ref([]);
const firstList = ref([]);
const formLabelWidth = "80px";
const form = reactive({
  id: "",
  name: "",
  pid: ""
});

onMounted(() => {
  loadAll();
  loadFirst();
});

const loadFirst = () => {
  useCategoryStoreHook()
    .getCategoryFirst()
    .then(res => {
      if (res.code === 200) {
        console.log(res);
        firstList.value = res.data;
      }
    });
};
const loadAll = () => {
  useCategoryStoreHook()
    .getCategoryList()
    .then(res => {
      if (res.code === 200) {
        console.log(res);
        tableData.value = res.data;
        treeData.value = buildTree(res.data);
      }
    });
};
const tableData = ref([]);
const dialogFormVisible = ref(false);
const loading = ref(false);
// const handleClick = (product: ProductInfo) => {
//   console.log(product);
//   router.push("/product/detail?id=" + product.id);
// };
const confirm = () => {
  loading.value = true;
  if (form.id) {
    useCategoryStoreHook()
      .updateCategoryInfo(form.id, form)
      .then(res => {
        if (res.code === 200) {
          console.log(res);
          dialogFormVisible.value = false;
          loadAll();
          loading.value = false;
        }
      });
  } else {
    useCategoryStoreHook()
      .addCategoryInfo(form)
      .then(res => {
        if (res.code === 200) {
          console.log(res);
          dialogFormVisible.value = false;
          loadAll();
          loadFirst();
          loading.value = false;
        }
      });
  }
};
const append = (data: Tree) => {
  form.name = "";
  form.id = "";
  form.pid = data.id;
  dialogFormVisible.value = true;
};

const edit = (data: Tree) => {
  form.name = data.name;
  form.id = data.id;
  form.pid = data.pid;
  dialogFormVisible.value = true;
};

const addCategory = () => {
  form.name = "";
  form.id = "";
  form.pid = "";
  dialogFormVisible.value = true;
};

const remove = (node: Node, data: Tree) => {
  useCategoryStoreHook()
    .delCategory(data.id)
    .then(res => {
      if (res.code === 200) {
        console.log(res);
        dialogFormVisible.value = false;
        const parent = node.parent;
        const children: Tree[] = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        treeData.value = [...treeData.value];
      }
    });
};
const treeProps = {
  label: "name"
};
defineOptions({
  name: "CategoryList"
});
</script>

<template>
  <div>
    <el-card>
      <el-button type="primary" @click.stop="addCategory">创建分类</el-button>
    </el-card>
    <el-tree :data="treeData" :props="treeProps" node-key="id" :indent="24">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span style="margin-left: 10px">
            <el-button v-if="!data.pid" type="primary" size="small" @click.stop="append(data)">添加下级</el-button>
            <el-button type="primary" size="small" @click.stop="edit(data)">编辑</el-button>
            <el-button type="danger" size="small" @click.stop="remove(node, data)">删除</el-button>
          </span>
        </div>
        <el-dialog v-model="dialogFormVisible" :title="form.id ? '编辑' : '添加'" width="480px">
          <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input placeholder="请输入名称" v-model="form.name" style="width: 320px" />
            </el-form-item>
            <el-form-item label="上级分类" :label-width="formLabelWidth" v-if="form.pid">
              <el-select v-model="form.pid" placeholder="请选择上级分类">
                <el-option v-for="item in firstList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="confirm" :loading="loading">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
      </template>
    </el-tree>
  </div>
</template>

<style lang="css" scoped>
:deep(.el-tree-node__content) {
  height: 45px;
}

:deep(.el-select .el-input) {
  width: 320px;
}
</style>
